<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" @click="handleMember(0)">
        添加子账号
      </el-button>
    </div>
    <el-table v-loading="listLoading" :data="LiveList" border fit highlight-current-row row-key="id"
      style="width: 100%;">
      <el-table-column label="序号" type="index" align="center" width="60px" />
      <el-table-column label="直播间名称" prop="name" align="center" />
      <el-table-column label="直播间封面" align="center">
        <template slot-scope="{row}">
          <el-image style="width: 100px; height: 100px" v-if="row.image" :src="row.image"
            :preview-src-list="[row.image]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="直播简介" prop="description" align="center" />


      <el-table-column label="直播类型" align="center">
        <template slot-scope="{row}">
          <span>{{ row.type===1?'APP':'小程序' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="直播状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.status===2?'关播':'直播中' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="上次开播时间" prop="updateTime" align="center" />
    </el-table>


    <el-dialog title="添加直播子账号: " :visible.sync="dialogDetailVisible" width="800px">

      <div slot="footer" class="dialog-footer  Popout" style="position: static;">
        <div class="div">
          子账号手机号：<input type="text" class="btn" value="" v-model="val"
            oninput="if(value.length>11)value=value.slice(0,11)" name="mobile" id="mobilie" maxlength="11" required>
        </div>
       <el-button @click="dialogDetailVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="addChld()">
          确定
        </el-button>






      </div>


    </el-dialog>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    childrenLiveList,
    saveLiveProduct,
    operationProduct
  } from '@/api/Live'

  import {
    productPageByQo
  } from '@/api/product'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import Cascader from '@/components/Cascader'
  import Upload from '@/components/Upload'
  import {
    liveProduct,
    addUser
  } from '@/api/childrenLive'

  export default {
    name: 'ProductList',
    directives: {
      waves
    },
    components: {
      Cascader,
      Pagination,
      Upload
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        LiveList: [],
        list: [],
        Livetotal: 0,
        total: 0,
        listLoading: true,
        val: '',
        listQuery: {
          pageNo: 1,
          pageSize: 20,
          name$lk: '',
          identifier: '',
          categoryId: '',
          status: '',
          storeId: '',

        },
        multipleSelection: [],
        categoryData: [],
        props: {
          value: 'id',
          label: 'name'
        },
        temp: {
          id: 0,
          productName: '',
          image: '',
          status: 1,
        },
        dialogDetailVisible: false,
        detail: {},
      }
    },
    watch: {},
    created() {
      this.get_liveList();
      this.getList();
    },
    methods: {

      get_liveList() {
        this.listLoading = true
        childrenLiveList({
          id: this.userInfo.id
        }).then(response => {
          this.LiveList = response || []
          this.Livetotal = response.length
          this.listLoading = false
        })
      },
      getList() {
        this.listLoading = true
        productPageByQo(this.listQuery).then(response => {
          this.list = response.list || []
          this.total = response.totalCount
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.pageNum = 1
        this.getList()
      },
      // 添加
      addto(id) {
        saveLiveProduct({
          productId: id
        }).then(response => {
          this.get_liveList();
          this.dialogDetailVisible = false
        })
      },
      handleLiveProduct(row) {
        operationProduct({
          liveId: row.liveId,
          productId: row.productId
        }).then(response => {
          this.get_liveList();
        })
      },

      handleMember(row) {
        // this.temp.id = row.id;
        // this.temp.productName = row.productName
        // this.temp.productImg = row.productImg
        // this.temp.status = 1;
        this.dialogDetailVisible = true;

      },
      // 查询
      handleFilter() {
        this.listQuery.pageNo = 1
        this.getList()
      },
      // 批量操作
      handleSelectionChange(val) {
        this.multipleSelection = val.map((ele) => {
          return ele.id
        })
      },
      //添加子账号

      addChld() {
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        // 判断手机号是否为11位
        if (myreg.test(this.val)) {
          addUser({
            mobile: this.val
          }).then(response => {
            this.res = response
          })
          this.$notify({
            title: '提示',
            message: this.res,
            duration: 2000
          });
          this.dialogDetailVisible = false
        } else {
          this.$notify({
            title: '提示',
            message: '手机号不正确请重新输入',
            duration: 2000
          });
        }

      }

    }
  }
</script>
<style>

  .div {
    position: absolute;
    left: 35px;
    top: 80px;
  }

  .btn {
    width: 190px;
    height: 35px;
    border: 1px black solid;
  }
</style>
